<template>
  <div>
    <h1>4号训练室 - tree组件封装</h1>
    <!-- 手写树形组件的封装 -->
    <hm-tree :data="list">
      <template #default="{ label, index }">
        <p>
          {{ label }} - {{ index }}
          <button>编辑</button>
          <button>删除</button>
        </p>
      </template>
    </hm-tree>
  </div>
</template>

<script>
import HmTree from './components/hm-tree.vue'
export default {
  components: {
    HmTree
  },
  data() {
    return {
      list: [
        {
          label: '老大',
          children: [
            {
              label: '老大家的大娃',
              children: [
                { label: '大孙子' },
                { label: '二孙子' },
                { label: '三孙子' }
              ]
            },
            { label: '老大家的二娃' },
            { label: '老大家的三娃' }
          ]
        },
        {
          label: '老二',
          children: [
            { label: '老二家的大娃' },
            { label: '老二家的二娃' },
            { label: '老二家的三娃' }
          ]
        },
        {
          label: '老三',
          children: []
        }
      ]
    }
  }
}
</script>

<style>

</style>
